<template>
  <div class="disaster_detail">
    <div class="title">
      <p class="tip">系统基本 </p>
      <button class="btn" @click="goBack">返回</button>
    </div>
    <div class="details">
      <p class="titBox">基本信息</p>
      <el-descriptions :column="5" direction="vertical">
        <el-descriptions-item label="系统编号">
          <div class="substance">{{ sysBasic.sysNumber ? sysBasic.sysNumber : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统名称">
          <div class="substance">{{ sysBasic.caption ? sysBasic.caption : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统代码">
          <div class="substance">{{ sysBasic.code ? sysBasic.code : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统部署位置">
          <div class="substance">{{ sysBasic.n6 ? sysBasic.n6 : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="网络安全等级保护级别">
          <div class="substance">{{
            sysBasic.levelofProtection ? sysBasic.levelofProtection : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="灾备建设等级（新国标）">
          <div class="substance">{{
            sysBasic.constructionLevel ? sysBasic.constructionLevel : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="灾备建设模式">
          <div class="substance">{{
            sysBasic.constructionMode ? sysBasic.constructionMode : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="灾备策略">
          <div class="substance">{{
            sysBasic.disasterRecoveryStrategy ? sysBasic.disasterRecoveryStrategy : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="业务RTO（分钟）">
          <div class="substance">{{ sysBasic.businessRto ? sysBasic.businessRto : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="业务RPO（分钟）">
          <div class="substance">{{ sysBasic.businessRpo ? sysBasic.businessRpo : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="科技RTO（分钟）">
          <div class="substance">{{ sysBasic.scienceRto ? sysBasic.scienceRto : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="科技RPO（分钟）">
          <div class="substance">{{ sysBasic.scienceRpo ? sysBasic.scienceRpo : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="项目建设单位">
          <div class="substance">{{ sysBasic.buildDept ? sysBasic.buildDept : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="建设处室">
          <div class="substance">{{ sysBasic.buildSubDept ? sysBasic.buildSubDept : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="项目建设处长">
          <div class="substance">{{ sysBasic.buildLeader ? sysBasic.buildLeader : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="项目经理">
          <div class="substance">{{
            sysBasic.proiectManager ? sysBasic.proiectManager : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="应用责任处室">
          <div class="substance">{{ sysBasic.appGroup ? sysBasic.appGroup : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="数据中心应用负责人">
          <div class="substance">{{ sysBasic.appDutyman ? sysBasic.appDutyman : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="数据中心系统负责人">
          <div class="substance">{{ sysBasic.sysDutyman ? sysBasic.sysDutyman : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="数据中心网络负责人">
          <div class="substance">{{ sysBasic.netDutyman ? sysBasic.netDutyman : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否为重要系统">
          <div class="substance">{{
            sysBasic.isKeySys == '1' ? '是' : sysBasic.isKeySys == '0' ? '否' : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="运维分类">
          <div class="substance">{{ sysBasic.systemType ? sysBasic.systemType : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否已接入一体化运维平台">
          <div class="substance">{{
            sysBasic.isYthpt == '1' ? '是' : sysBasic.isYthpt == '0' ? '否' : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否具备中心级切换条件">
          <div class="substance">{{
            sysBasic.isZxqh == '1' ? '是' : sysBasic.isZxqh == '0' ? '否' : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="是否已完成全面切换演练">
          <div class="substance">{{
            sysBasic.isQmqhyl == '1' ? '是' : sysBasic.isQmqhyl == '0' ? '否' : '--'
          }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="投产日期">
          <div class="substance">{{ sysBasic.productDate ? sysBasic.productDate : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="下线日期">
          <div class="substance">{{ sysBasic.rolledDate ? sysBasic.rolledDate : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统状态">
          <div class="substance">{{ sysBasic.sysState ? sysBasic.sysState : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="系统来源">
          <div class="substance">{{ sysBasic.sysSource ? sysBasic.sysSource : '--' }}</div>
        </el-descriptions-item>
        <el-descriptions-item> </el-descriptions-item>
        <el-descriptions-item label="备注" span="5">
          <div class="substance">{{ sysBasic.memo ? sysBasic.memo : '--' }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="Drill_plan">
      <div class="title">
        <p class="drillName">切换演练计划 </p>
        <button class="btn" @click="openDrill_plan">查看详情</button>
      </div>
      <div class="tableBox">
        <div class="table" ref="container">
          <el-table
            ref="multipleTableRef"
            :data="qhylPlans"
            tooltip-effect="dark"
            @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick"
            stripe
          >
            <el-table-column
              align="center"
              :reserve-selection="false"
              type="selection"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhCode"
              label="计划单号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhType"
              label="演练类型"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhName"
              label="演练名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhDate"
              label="计划演练月份"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhFzr"
              label="演练负责人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhyljhStart"
              label="计划完成状态"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="createName"
              label="创建人"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="Drill">
      <div class="title">
        <p class="drillName">切换演练 </p>
        <button class="btn" @click="openDrill">查看详情</button>
      </div>
      <div class="tableBox">
        <div class="table" ref="container">
          <el-table
            ref="multipleDrillRef"
            @select="selectDrill"
            @selection-change="handleSelectionDrill"
            row-key="getRowKey"
            @row-click="handleRowDrill"
            :data="qhyls"
            tooltip-effect="dark"
          >
            <!--ref="multipleTableRef" @select="selectChange"
            @selection-change="handleSelectionChange"
            row-key="getRowKey"
            @row-click="handleRowClick" -->
            <el-table-column
              align="center"
              :reserve-selection="false"
              type="selection"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhylCode"
              label="演练单号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhylType"
              label="演练类型"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhylFl"
              label="演练分类"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhylScene"
              label="演练场景"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="qhylGoal"
              label="演练目的"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="ifRollback"
              label="本次演练是否回退"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>{{
                  scope.row.ifRollback == 1 ? '是' : scope.row.ifRollback == 0 ? '否' : ''
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="qhylTime"
              label="演练时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="createNames"
              label="创建人"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" width="90%">
      <drillPlan :type="multipleTable[0].qhyljhId"></drillPlan>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false" type="primary">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogPlan" width="90%">
      <drill :type="multipleDrill[0].qhylId"></drill>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogPlan = false" type="primary">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import drillPlan from './Drill_plan.vue';
  import drill from './Drill.vue';
  import { ref, reactive, onMounted } from 'vue';
  import { DisasterSystemView } from '@/http/Disaster';
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  // const changeList = reactive([]);
  const sysBasic = ref('');
  const qhylPlans = reactive([]); // 切换演练计划列表
  const qhyls = reactive([]); // 切换演练计划
  const systemNo = ref(route.params.systemNo);
  const type = ref(route.params.type);
  const qhyljhDate = ref(route.params.qhyljhDate); // 日期
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const multipleTable = ref<User[]>([]);
  const multipleDrillRef = ref<InstanceType<typeof ElTable>>();
  const multipleDrill = ref<User[]>([]);
  const dialogTableVisible = ref(false);
  const dialogPlan = ref(false);
  onMounted(() => {
    Disaster_change();
  });
  const Disaster_change = () => {
    DisasterSystemView({
      qhyljhDate: qhyljhDate.value,
      systemNo: systemNo.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      qhylPlans.length = 0;
      qhyls.length = 0;
      sysBasic.value = res.data.data.sysBasic;
      (qhylPlans as any).push(...res.data.data.qhylPlans);
      (qhyls as any).push(...res.data.data.qhyls);
      // total.value = res.data.data.total;
    });
  };
  const goBack = () => {
    router.push({
      name: 'plan_finish_list',
      params: {
        type: type.value
      }
    });
  };
  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row) => {
    multipleTable.value = row;
    multipleTableRef.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };
  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRef.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionChange = (val: string) => {
    multipleTable.value = val;
  };
  const handleRowDrill = (row) => {
    multipleDrill.value = row;
    multipleDrillRef.value.toggleRowSelection(row);
    selectDrill(multipleDrill.value);
  };
  const selectDrill = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleDrillRef.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionDrill = (val: string) => {
    multipleDrill.value = val;
  };
  const openDrill_plan = () => {
    if (!multipleTable.value.length) {
      ElMessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      dialogTableVisible.value = true;
    }
  };
  const openDrill = () => {
    if (!multipleDrill.value.length) {
      ElMessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
      dialogPlan.value = true;
    }
  };
</script>
<style lang="less" scoped>
  .disaster_detail {
    width: 100%;
    height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 16px 27px 27px;
    box-sizing: border-box;
    overflow: scroll;
    .title {
      display: flex;
      justify-content: space-between;
      height: 45px;
      margin-bottom: 16px;
      .tip {
        line-height: 45px;
        font-size: 24px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }
      .btn {
        width: 107px;
        height: 45px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 16px;
        border: 0;
        cursor: pointer;
      }
    }
    .details {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      margin-bottom: 27px;
      .titBox {
        font-size: 21px;
        font-weight: bold;
        color: #46535d;
        margin: 0;
        padding: 0;
        margin-bottom: 25px;
      }

      .el-descriptions {
        :deep(.el-descriptions__body) {
          .el-descriptions__table {
            .el-descriptions__cell {
              font-size: 19px;
              color: #46535d;
              margin-right: 25px !important;
              width: 18%;
              &.el-descriptions__label {
                // background: #fafafa !important;
                // padding: 10px 10px 0;
                // border: 3px solid #fafafa;
                // border-bottom: none;
                // border-right: 3px solid #fff;
                // font-size: 14px;
                // font-weight: 400;
                // color: #929ea8;
                padding: 13px 0;
              }
              &.el-descriptions__content {
                .substance {
                  height: 45px;
                  background: #ffffff;
                  border-radius: 3px 3px 3px 3px;
                  border: 1px solid #dddddd;
                  line-height: 45px;
                  padding-left: 13px;
                }
                padding: 0;
                padding-right: 25px;
              }
            }

            // :deep(.el-descriptions-item__label) {
            //   //margin-right: 3px;
            //   background: #fafafa !important;
            //   padding: 10px 10px 0;
            // }
          }
        }
      }
    }
    .Drill_plan,
    .Drill {
      background: #fff;
      padding: 27px;
      border-radius: 16px;
      .title {
        display: flex;
        justify-content: space-between;
        height: 45px;
        margin-bottom: 16px;
        .drillName {
          line-height: 45px;
          font-size: 21px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .btn {
          width: 107px;
          height: 45px;
          background: #007af5;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          border: 0;
        }
      }
    }
    .Drill_plan {
      margin-bottom: 27px;
    }
    :deep(.el-dialog) {
      margin: 10 auto;
      .el-dialog__header {
        background: #eaeef4;
        margin-right: 0;
      }
      .el-dialog__footer {
        background: #eaeef4;
        text-align: center;
        .el-button {
          width: 107px;
          height: 45px;
          background: #007af5;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          border: 0;
          cursor: pointer;
        }
      }
      .el-dialog__body {
        padding: 0;
      }
    }
  }
</style>
